<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h3>{{ msg | msgFormat1 }}</h3>
    <h3>{{ msg | msgFormat2('周末') }}</h3>
    <h3>{{ msg | msgFormat2('国庆节') | msgFormat3 }}</h3>

    <hr>

    <p>今天的日期是：{{ date | dateFormat }}</p>
  </div>

  <script src="libs/vue.js"></script>
  <script>

    // 1.无参数过滤器
    Vue.filter('msgFormat1', function (data) {
      return data.replace(/今天/g, '明天')
    })
    // 2.带参数过滤器    
    Vue.filter('msgFormat2', function (data, arg) {
      return data.replace(/今天/g, arg)
    })
    // 3.多个过滤器
    Vue.filter('msgFormat3', function (data) {
      return data + '那一定很愉快。'
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '今天天气很好，我们今天去购物吧。',
        date: new Date()
      },
      filters: {
        dateFormat: function (date) {
          var time = new Date(date)
          var year = time.getFullYear()
          var month = (time.getMonth() + 1).toString().padStart(2, 0)
          var day = time.getDay().toString().padStart(2, 0)

          var hours = time.getHours().toString().padStart(2, 0)
          var minutes = time.getMinutes().toString().padStart(2, 0)
          var seconds = time.getSeconds().toString().padStart(2, 0)
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        }
      }
    })
  </script>
</body>

</html>